<!-- TopNaviBar.vue -->
<template>
  <div class="page">
    <nav class="nav-wrap">
      <div class="nav-inner" style="margin-top: 5px">
        <div>
          <img src="../assets/img/home/logo.svg" class=" w-32 mr-3" alt="">
        </div>
        <div
            v-for="item in items"
            :key="item.id"
            class="nav-item step-item"
            @click="setStep(item.id)"
        >
          <div>
            <div class="flex">
              <div class="step-badge-wrap" style="margin-right: 10px">
                <div
                    v-if="item.id !== 0"
                    :class="[
                    'badge',
                    isCompleted(item.id) ? 'badge-complete' : '',
                    isActive(item.id) ? 'badge-active' : '',
                  ]"
                    :title="isCompleted(item.id) ? '已完成' : '步骤 ' + item.id"
                >
                  <template v-if="isCompleted(item.id)">
                    <svg width="11.45454" height="9" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                          d="M6.27306 10.8349L0.265137 5.4267L1.26333 4.31845L6.07257 8.64736L12.6589 0.0748558L13.8423 0.983467L6.27306 10.8349Z"
                          fill="white"/>
                      <path d="M5.14263 9.81789L0.265137 5.4267L1.26333 4.31845L6.07257 8.64736" fill="white"/>
                    </svg>
                  </template>
                  <template v-else>
                    <span class="badge-number">{{ item.id }}</span>
                  </template>
                </div>
              </div>

              <div class="label-wrap">
                <div :class="['label', isActive(item.id) ? 'label-active' : '']">
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div
                v-if="isActive(item.id) && item.id !== 0"
                class="underline"
                :class="{ 'underline-animate': underlineAnimation }"
            />
            <div
                v-if="isActive(item.id) && item.id === 0"
                class="underline-home"
                :class="{ 'underline-animate': underlineAnimation }"
            />
            <div v-if="!isActive(item.id) && item.id !== 0" class="underline-none"/>
            <div v-if="!isActive(item.id) && item.id === 0" class="underline-home-none"/>
          </div>
        </div>
      </div>

      <div class="flex items-center">
        <!-- 设置按钮 -->
        <div class="mr-5">
          <div
              class="select-none cursor-pointer transition hover:bg-gray-500 py-2 px-3 pr-4 rounded-full flex items-center border border-gray-700"
              @click="showModal = true"
          >
            <svg t="1756442411999" class="icon" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="4401" width="18" height="18">
              <path
                  d="M1072.147851 406.226367c-6.331285-33.456782-26.762037-55.073399-52.047135-55.073399-0.323417 0-0.651455 0.003081-0.830105 0.009241l-4.655674 0c-73.124722 0-132.618162-59.491899-132.618162-132.618162 0-23.731152 11.447443-50.336101 11.546009-50.565574 13.104573-29.498767 3.023185-65.672257-23.427755-84.127081l-1.601687-1.127342-134.400039-74.661726-1.700252-0.745401c-8.753836-3.805547-18.334698-5.735272-28.479231-5.735272-20.789593 0-41.235746 8.344174-54.683758 22.306575-14.741683 15.216028-65.622973 58.649474-104.721083 58.649474-39.450789 0-90.633935-44.286652-105.438762-59.784516-13.518857-14.247316-34.128258-22.753199-55.127302-22.753199-9.945862 0-19.354234 1.861961-27.958682 5.531982l-1.746455 0.74078-139.141957 76.431283-1.643269 1.139662c-26.537186 18.437884-36.675557 54.579032-23.584845 84.062398 0.115506 0.264895 11.579891 26.725075 11.579891 50.634877 0 73.126262-59.491899 132.618162-132.618162 132.618162l-4.581749 0c-0.318797-0.00616-0.636055-0.01078-0.951772-0.01078-25.260456 0-45.672728 21.618157-52.002472 55.0811-0.462025 2.453354-11.313456 60.622322-11.313456 106.117939 0 45.494078 10.85143 103.659965 11.314996 106.119479 6.334365 33.458322 26.758957 55.076479 52.036353 55.076479 0.320337 0 0.651455-0.00616 0.842426-0.012321l4.655674 0c73.126262 0 132.618162 59.491899 132.618162 132.616622 0 23.760413-11.444363 50.333021-11.546009 50.565574-13.093793 29.474125-3.041666 65.646075 23.395414 84.151722l1.569346 1.093459 131.838879 73.726895 1.675611 0.7377c8.750757 3.84251 18.305437 5.790715 28.397607 5.790715 21.082208 0 41.676209-8.706094 55.0888-23.290689 18.724339-20.347588 69.527086-62.362616 107.04815-62.362616 40.625872 0 92.72537 47.100385 107.759669 63.583903 13.441852 14.831008 34.176001 23.689571 55.470741 23.695731l0.00616 0c9.895039 0 19.27877-1.883523 27.893999-5.598205l1.711034-0.73924 136.659342-75.531873 1.617088-1.128882c26.492523-18.456365 36.601633-54.600594 23.538642-84.016195-0.115506-0.267974-11.595291-27.082374-11.595291-50.67646 0-73.124722 59.49344-132.616622 132.618162-132.616622l4.517066-0.00154c0.300316 0.00616 0.599092 0.009241 0.899409 0.009241 25.331299-0.00154 45.785153-21.619697 52.107197-55.054918 0.112426-0.589852 11.325776-59.507301 11.325776-106.14104C1083.464388 466.640776 1072.609877 408.67356 1072.147851 406.226367zM377.486862 945.656142l-115.32764-64.487932c5.082277-13.052211 15.437801-43.51815 15.437801-75.017486 0-109.382917-84.176364-199.816642-192.587488-208.134635-2.647404-15.427021-8.873963-54.967133-8.873963-85.667166 0-30.65691 6.223479-70.232445 8.869343-85.671786 108.415744-8.311832 192.592108-98.745557 192.592108-208.134635 0-31.416171-10.300081-61.797405-15.371577-74.854236l122.721583-67.40331c0.003081 0 0.00462 0.00154 0.007701 0.00154 4.423121 4.518606 22.121764 22.080182 46.558275 39.493911 39.929754 28.46229 77.952885 42.894416 113.014434 42.894416 34.716571 0 72.437845-14.151831 112.115025-42.06431 24.282503-17.07953 41.896442-34.302288 46.308782-38.74543 0.009241-0.00154 0.018481-0.00462 0.026182-0.00616l118.301542 65.726159c-5.077657 13.055291-15.416239 43.499669-15.416239 74.958962 0 109.389077 84.174824 199.822802 192.590568 208.134635 2.645865 15.462442 8.872423 55.107281 8.872423 85.671786 0 30.687711-6.223479 70.241685-8.869343 85.673326C890.042174 606.334084 805.86427 696.767809 805.86427 806.158426c0 31.450053 10.317022 61.851309 15.393138 74.903519l-119.783103 66.198965c-5.168521-5.490399-22.603811-23.363073-46.740005-41.288109-40.701336-30.224145-79.662378-45.549521-115.800446-45.549521-35.79155 0-74.458435 15.038919-114.927219 44.694774C400.22004 922.554885 382.666163 940.255068 377.486862 945.656142zM731.271848 511.646647c0-105.803762-86.081448-191.88059-191.888289-191.88059-105.803762 0-191.88059 86.076827-191.88059 191.88059 0 105.803762 86.076827 191.882129 191.88059 191.882129C645.19194 703.528777 731.271848 617.450409 731.271848 511.646647zM539.383558 395.903184c63.825696 0 115.751164 51.922387 115.751164 115.743463 0 63.825696-51.925468 115.751164-115.751164 115.751164-63.821076 0-115.743463-51.925468-115.743463-115.751164C423.640095 447.824031 475.562482 395.903184 539.383558 395.903184z"
                  fill="#fff" p-id="4402"></path>
            </svg>
            <div class="ml-1 text-white">设置</div>
          </div>
        </div>

        <!-- 右侧头像 -->
        <div class="avatar cursor-pointer">
          <img src="../assets/img/home/demo_head_img.png" alt="avatar"/>
        </div>
      </div>
    </nav>

    <!-- 弹窗 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="flex flex-col items-center">
          <svg t="1756443759623" class="icon" viewBox="0 0 1121 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="5425" width="40" height="40">
            <path
                d="M1121.335259 662.764396H814.255549V371.961528H1121.335259z m-226.885882-80.193827H1041.141431V452.155356H894.449377zM963.165463 290.802868h-306.991997V0h306.991997z m-226.798169-80.193828h146.604342V80.193828h-146.604342zM921.314309 1023.98747H614.247131V733.184601h307.067178z m-226.873351-80.193828h146.679524V813.378429H694.440958z"
                p-id="5426" fill="#3b60f3"></path>
            <path d="M0 479.057879h865.692372v80.193828H0z" p-id="5427" fill="#3b60f3"></path>
            <path
                d="M149.849686 545.631287L92.974719 489.094638 464.322263 115.529233h248.31267v80.193828H497.690414l-347.840728 349.908226zM654.331514 918.68295h-149.110399L242.63645 542.085216l65.784-45.860846L547.072269 838.489122h107.259245v80.193828z"
                p-id="5428" fill="#3b60f3"></path>
          </svg>

          <h3 class="text-center text-xl font-bold mb-8 mt-5">智能体API接口设置</h3>
        </div>

        <!-- 添加 Tabs -->
        <div class="tabs">
          <div
              v-for="tab in tabs"
              :key="tab.key"
              :class="['tab', activeTab === tab.key ? 'active' : '']"
              @click="activeTab = tab.key"
          >
            {{ tab.label }}
          </div>
        </div>

        <!-- 表单内容 -->
        <div class="form-group">
          <label>user_id:</label>
          <input v-model="formData[activeTab].user_id" type="text" placeholder="请输入 user_id"/>
        </div>
        <div class="form-group">
          <label>bot_id:</label>
          <input v-model="formData[activeTab].bot_id" type="text" placeholder="请输入 bot_id"/>
        </div>
        <div class="form-group">
          <label>url:</label>
          <input v-model="formData[activeTab].url" type="text" placeholder="请输入 API 地址"/>
        </div>
        <button class="apply-btn mt-3 font-bold" @click="saveToStorage">应用</button>
      </div>
    </div>

  </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()

const items = [
  {id: 0, label: '首页'},
  {id: 1, label: '选品'},
  {id: 2, label: '营销'},
  {id: 3, label: '运营'},
  {id: 4, label: '客服'}
]

const stepToRouteMap = {
  0: 'home',
  1: 'select',
  2: 'promote',
  3: 'operate',
  4: 'service'
}

const routeToStepMap = {
  'home': 0,
  'select': 1,
  'promote': 2,
  'operate': 3,
  'service': 4
}

const maxStep = items.length - 1
const currentStep = ref(0)
const underlineAnimation = ref(false)

// 监听路由变化
watch(() => route.name, (newRouteName) => {
  if (routeToStepMap.hasOwnProperty(newRouteName)) {
    currentStep.value = routeToStepMap[newRouteName]
  }
}, {immediate: true})

const isCompleted = (id) => {
  return currentStep.value > 0 && id > 0 && id < currentStep.value
}

const isActive = (id) => id === currentStep.value

const setStep = (id) => {
  if (id < 0) id = 0
  if (id > maxStep) id = maxStep

  if (currentStep.value !== id) {
    underlineAnimation.value = true
    setTimeout(() => {
      underlineAnimation.value = false
    }, 300)
  }

  currentStep.value = id
  const routeName = stepToRouteMap[id]
  if (routeName && route.name !== routeName) {
    router.push({name: routeName})
  }
}

// 弹窗控制
const showModal = ref(false)
// const formData = ref({
//   user_id: '',
//   bot_id: '',
//   url: ''
// })

// 添加 tabs 数据
const tabs = [
  {key: 'select', label: '选品'},
  {key: 'promote', label: '营销'},
  {key: 'operate', label: '运营'},
  {key: 'service', label: '客服'}
]

const activeTab = ref('select') // 默认选中第一个 tab

// 修改 formData 结构以支持多个模块
const formData = ref({
  select: {
    user_id: '',
    bot_id: '',
    url: ''
  },
  promote: {
    user_id: '',
    bot_id: '',
    url: ''
  },
  operate: {
    user_id: '',
    bot_id: '',
    url: ''
  },
  service: {
    user_id: '',
    bot_id: '',
    url: ''
  }
})


// 修改 loadFromStorage 以适应新的数据结构
const loadFromStorage = () => {
  const saved = localStorage.getItem('apiConfig')
  if (saved) {
    const parsed = JSON.parse(saved)
    // 保持原有默认值，只覆盖存在的值
    Object.keys(parsed).forEach(key => {
      if (formData.value[key]) {
        Object.assign(formData.value[key], parsed[key])
      }
    })
  }
}

// 修改 saveToStorage 以适应新的数据结构
const saveToStorage = () => {
  localStorage.setItem('apiConfig', JSON.stringify(formData.value))
  closeModal()
}


// 关闭弹窗
const closeModal = () => {
  showModal.value = false
}

// 打开弹窗
const openModal = () => {
  showModal.value = true
}

// 页面加载时加载数据
loadFromStorage()

// 绑定事件
</script>

<style scoped>
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 28px;
  background: #111213;
  min-height: 50px;
  gap: 16px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.03);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.step-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: bold;
}

.badge-number {
  font-size: 14px;
  font-weight: bold;
}

.label {
  font-size: 16px;
  color: #fff;
}

.underline-home {
  height: 3px;
  background: #fff;
  border-radius: 2px;
  width: 49px;
  margin-top: 10px;
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.underline {
  height: 3px;
  background: #fff;
  border-radius: 2px;
  width: 66px;
  margin-top: 10px;
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.underline-home-none {
  height: 3px;
  border-radius: 2px;
  width: 49px;
  margin-top: 10px;
}

.underline-none {
  height: 3px;
  border-radius: 2px;
  width: 66px;
  margin-top: 10px;
}

.underline-animate {
  animation: scaleUpDown 0.2s ease;
}

@keyframes scaleUpDown {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

.avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  min-width: 36px;
}

button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  cursor: pointer;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 弹窗遮罩层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

}

/* 弹窗内容区域 */
.modal-content {
  background: white;
  padding: 35px;
  padding-top: 40px;
  border-radius: 8px;
  width: 450px;
  max-width: 90%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
}

/* 表单组样式 */
.form-group {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.form-group label {
  font-size: 14px;
  color: #333;
  margin-right: 6px;
  width: 60px;
}

.form-group input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  flex: 1;
}


/* 应用按钮 */
.apply-btn {
  width: 100%;
  padding: 10px;
  background-color: #2f63ff;
  color: white;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.apply-btn:hover {
  background-color: #1a50d0;
}

/* 添加 Tabs 样式 */
.tabs {
  display: flex;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.tab.active {
  color: #2f63ff;
  border-bottom: 2px solid #2f63ff;
  font-weight: bold;
}

.tab:hover {
  background-color: #f5f5f5;
}

/* 表单组样式调整 */
.form-group {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.form-group label {
  font-size: 14px;
  color: #333;
  margin-right: 6px;
  width: 60px;
  flex-shrink: 0;
}

.form-group input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  flex: 1;
}


</style>
